<template>
  <div class="nav-content">
    <van-nav-bar title="登录界面" left-text="返回" left-arrow @click-left="$router.back()" />
    <van-form @submit="onSubmit" ref="loginForm">
      <van-field
        v-model="user.mobile"
        name="手机"
        label="手机"
        placeholder="手机"
        :rules="userFormRules.mobile"
        type="number"
        maxlength="11"
      >
        <i slot="left-icon" class="iconfont icon-wode"></i>
      </van-field>
      <van-field
        v-model="user.code"
        name="验证码"
        label="验证码"
        placeholder="验证码"
        :rules="userFormRules.code"
        type="number"
        maxlength="6"
      >
        <i slot="left-icon" class="iconfont icon-shouji"></i>

        <template #button>
          <van-count-down
            :time="time"
            format=" ss s"
            v-if=" isCountDownShow"
            @finish=" isCountDownShow = false"
          />
          <van-button
            v-else
            class="buttoncolor"
            native-type="button"
            size="small"
            round
            type="primary"
            @click="onSendmsg"
          >发送验证码</van-button>
        </template>
      </van-field>

      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { loginAPI, codeAPI } from '@/api/user'

export default {

  name: 'LoginIndex',
  // import引入的组件需要注入到对象中才能使用
  components: {

  },
  props: {},
  data () {
    // 这里存放数据
    return {
      // 计时器时间
      time: 5 * 1000,
      isCountDownShow: false,
      user: {
        mobile: '13229220218',
        code: '246810'
      },
      userFormRules: {
        mobile: [
          {
            required: true,
            message: '请填写手机'
          },
          {
            pattern: /^1[3|5|7|8]\d{9}$/,
            message: '手机号错误'
          }],
        code: [
          {
            required: true,
            message: '请填写验证码'
          },
          {
            pattern: /^\d{6}$/,
            message: '验证码错误'
          }]
      }

    }
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 表单提交事件
    async onSubmit () {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true, // 禁用背景点击
        duration: 0 // 持续时间，默认2000如果为0持续展示
      })
      const user = this.user

      try {
        const { data } = await loginAPI(user)
        // console.log(data, '登录成功')
        this.$store.commit('setUser', data.data)
        this.$toast.success('登录成功')
        // 登录成功，跳转页面
        this.$router.back()
      } catch (error) {
        if (error.response.status === 400) {
          this.$toast.fail('登录失败')
          console.log('手机号或验证码错误')
        } else {
          this.$toast.fail('登录失败')
          console.log('登录失败', error)
        }
      }
    },
    // 验证码
    async onSendmsg () {
      // 点击验证码按钮验证手机号
      try {
        await this.$refs.loginForm.validate('手机')
      } catch (error) {
        // 验证失败跳过接下来代码

        return console.log('验证失败', error)
      }
      this.isCountDownShow = true
      // 发送验证码
      try {
        await codeAPI(this.user.mobile)
        this.$toast('发送成功')
      } catch (error) {
        // 发送失败，关闭倒计时
        this.isCountDownShow = false
        if (error.response.status === 429) {
          this.$toast.fail('发送过于频繁')
        } else {
          this.$toast.fail('发送失败')
        }
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.nav-content {
  background-color: transparent;
}
/* 测试git */
.iconfont {
  font-size: 35px;
}
.buttoncolor {
  background-color: gainsboro;
  color: black;
  border: transparent;
}
</style>
